前端学习圈

小程序-01 小程序入门

一、注册小程序

  1. 注册账号：mp.weixin.qq.com
  2. 小程序的特点：不需要安装就可以使用；

注册注意事项：在选择服务类目时，不能选择游戏，否则以后就不能修改，其他可以修改；

二、小程序目录结构

  1. 一个小程序主体部分由三个文件组成，必须放在项目根目录；
├── app.js    # 项目入口文件，小程序逻辑
├── app.json  # 小程序公共配置
└── app.wxss  # 小程序公共样式表
  1. 一个小程序页面由四个文件组成：

  • js ---- 页面逻辑

  • wxml ---- 页面结构，相当于html，在页面结构html大部分标签都不能使用；

  • json ---- 页面配置

  • wxss ---- 页面样式表

三、全局配置（配置窗口信息）

在app.json文件填写全局配置，为严格的json对象模式；

  1. pages：（页面路径）

（1）新建页面，以数组的形式填写，

（2）填写路径名会自动创建一个小程序页面，会自动生成四个文件，不需要手动创建

（3）在pages里，谁在第一项，谁就是第一个页面，文件名不需要写后缀；

（4）小程序中新增/减少页面都需要对pages数组修改；

  1. window：配置小程序的状态栏、导航条、标题、窗口背景色；（窗口表现）

常用的：

navigationBarBackgroundColor ：导航栏背景色，必须16进制；

navigationBarTextStyle : 导航栏标题颜色，仅支持black/white

navigationBarTitleText : 导航栏标题文字内容

enablePullDownRefresh ： 开启全局下拉刷新

backgroundColor : 下拉窗口的背景色（需要开启下拉刷新）

backgroundTextStyle: 下拉loading的样式，仅支持dark/light 小点的颜色;

  1. tabBar：导航栏，

常用选项：

color : tab文字默认颜色，仅支持16进制；

selectedColor : 文字选中时的颜色，仅支持16进制；

backgroundColor : tab背景色，仅支持16进制；

borderStyle : black/white tab上边框的颜色

list : tab列表，最少2个，最多5个；

position : bottom/top tab的位置

list为一个数组，其中的项：

pagePath : 页面路径，必须在pages有定义的

text : tab上按钮文字

iconPath : 图片路径，限制40k，不支持网络图片，建议81px*81px，当position:top时不显示icon；

selectedIconPath : 选中时图片路径；

JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。 1. 数字，包含浮点数和整数 2. 字符串，需要包裹在双引号中 3. Bool值，true 或者 false 4. 数组，需要包裹在方括号中 [] 5. 对象，需要包裹在大括号中 {} 6. Null

还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。

四、页面配置

  1. 在组件里的json文件里，添加app.json的window中相同的配置项；

五、wxml模板

在小程序里面，标签名字不能使用div、p、span等，

在小程序里面使用的是view、text、button、image；

在小程序里面，也是MVVM的开发模式， 提倡把渲染和逻辑分离，不要让js直接操作dom，js只需要管理状态即可；

  1. 在使用字符串插值：，标签上使用动态属性时也需要双大括号；

  2. 修改值：this.setData({msg: 'hello'})

注意：修改值时，即使使用push方法改变原数组，也没用，不会实时更新；

六、wxss

wxss具有css大部分特性，同时wxss扩展了一些特性有

  1. 尺寸单位：

    rpx： 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

    如： iPhone6 上，屏幕宽度为375px，共有750个物理像素，

    则750rpx = 375px = 750物理像素，

    1rpx = 0.5px = 1物理像素。页面不同，换算的单位也不同；

注意：在使用px时，375px会自动转换750px；

  1. 样式导入

使用@import 语句导入外联样式表

@import 'common.wxss';

七、page

组件里的js文件，都由Page({})包裹，有以下属性；

  1. data函数

第一次渲染使用的初始数据，data数据必须是字符串、数字、布尔值、对象、数组类型的；

生命周期函数

（1）onLoad(options)：页面加载，只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数

（2）onShow：页面显示，页面切入前台时触发；

（3）onReady：页面初次渲染完成，只会调用一次；

（4）onHide：页面隐藏，页面切入后台时触发；

（5）onUnload：页面卸载，离开当前页面触发；

页面一进入触发：onLoad、onShow、onReady;

当在tabBar中切换时，切入只会触发onShow；

  1. 页面事件处理函数

onPullDownRefresh()：监听用户下拉刷新事件；需要开启下拉事件；

wx.stopPullDownRefresh()，停止当前页面下拉刷新；

onReachBottom()：监听用户上拉触底事件；

onPageScroll()：监听用户滑动页面事件，会实时触发；一个参数（scrollTop）

八、事件

  1. 事件分类：

bind：冒泡事件，触摸子元素会触发父元素的事件；

catch：非冒泡事件；

例：bindtap='skip'、catchtap='skip'

后面也可以紧跟一个冒号；bind:tap='skip'；

注意：事件不能传参；可以通过在页面绑定id，或者通过data-，后面添加内容，在事件通过event获取；

  1. 事件

tap：触摸马上离开，类似click事件；

touchstart：手指触摸动作开始

touchmove：手指触摸后移动；

touchcancel：手指触摸动作打断，如来电提醒，弹窗；

touchend：手指触摸动作结束

  1. 监听子元素事件

给父元素绑定capture-bind:touchstart='事件名'，当触摸子元素时，则会触发该事件；